<template>
	<view class="searchPage">
		<headerinfo></headerinfo>
		<u-navbar title="添加留言" :placeholder="true" leftIconColor="#fff" :autoBack="true" :bgColor="bgColor"
			:titleStyle="titleStyle"></u-navbar>
	<!-- 	<view class="tablist">
			<span :class="index == guanIndex?'active':''" @click="changeGuan(index)" v-for="(item,index) in guanlist"
				:key="index">{{item}}</span>
		</view> -->

		<view class="guanmain">
			<view class="inputbox">
				<span>留言内容 <i style="color: red;">*</i> </span>
				<textarea  v-model="form.message" placeholder="请输入留言内容"></textarea>
			</view>
		
		</view>
		<view class="create" @click="submit">
			提交
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				id:'',
				bgColor: '#de4849',
				titleStyle: {
					color: '#fff'
				},
				form:{
					message:'',
					museumId:'',
					familyId: uni.getStorageSync('familyId') ? uni.getStorageSync('familyId')[0] : '',
				}
			};
		},
		onLoad(e) {
			this.form.museumId = e.id
		},
		methods: {
			submit(){
				if(this.form.message == ''){
					return this.$Show.show('留言内容不能为空')
				}
				
				
				this.$api.museummuseumLeaveMessage(this.form).then(res=>{
					this.$Show.successJump('留言成功')
				})
				
			}
		}
	};
</script>


<style lang="scss" scoped>
	
	.tablist {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 120rpx;
		background-color: #fff;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;

		span {
			width: 33.3%;
			text-align: center;
			border-bottom: 2px solid #fff;
			padding-bottom: 20rpx;
		}

		.active {
			color: #de4849;
			border-color: #de4849;
		}
	}

	.searchPage {
		width: 100%;
		height: 100vh;
		background-size: 100%;
		background-color: #e4e1e1;
	}

	.create {
		width: 600rpx;
		height: 80rpx;
		background: #de4849;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 30rpx auto;
		border-radius: 20rpx;
	}
	
	.guanmain{
		margin-top: 20rpx;
		.inputbox{
			background-color: #fff;
			padding: 20rpx;
			textarea{
				height: 300rpx;
				padding: 20rpx;
				border: 1rpx solid #d2d2d2;
				border-radius: 20rpx;
				width: 100%;
				margin-top: 20rpx;
			}
			span{
				margin-right: 20rpx;
				white-space: nowrap;
				min-width: 170rpx;
				display: flex;
			}
			input{
				width: 80%;
			}
		}
	}
</style>